<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动物体类</title>
    <style>
    
    </style>
</head>

<body>

</body>

</html>
<script src="./jquery-3.4.1.js"></script>
<script src="./jquery-1.8.3.min.js"></script>
<script>


    // 地图类
    // width(宽), height（高）,step（速度）， bg_img(背景图)，bg_top（背景图移动）
    class MAP {
        constructor(json) {
            let default_obj = {
                width: "480px",
                height: "700px",
                step: 1,
                bg_img: "img/bg.jpg",
                bg_top: 0
            }
            for (let key in default_obj) {
                if (json[key] != undefined) {
                    this[key] = json[key];
                } else {
                    this[key] = default_obj[key];
                }
            }
            this.$ = $("<div></div>");
            this.father = document.body;
            this.timer = null;
        }
        create_ui() {
            this.$.css({
                "position":"relative",
                "margin": "0 auto",
                "width": this.width,
                "height": this.height,
                "background-image": "url(" + this.bg_img + ")",
                "background-position-y": this.bg_top + "px",
            });
            this.father.appendChild(this.$[0]);
        }
        move() {
            this.timer = setInterval(() => {
                this.bg_top += this.step;
                if (this.bg_top >= 853) {
                    this.bg_top = 0;
                }
                this.$.css({ "background-position-y": this.bg_top + "px" });
            }, 10)
        }
        start() {
            this.create_ui();
            this.move();
        }
    }
    // 2移动的物体类
    class Mover {
        constructor(json) {
            let default_obj = {
                width: "50px",
                height: "70px",
                step: 3,
                bg_img: "img/我的飞机.gif",
                dir_l:0,
                dir_t:0
            }
            for (let key in default_obj) {
                if (json[key] != undefined) {
                    this[key] = json[key];
                } else {
                    this[key] = default_obj[key];
                }
            }
            this.$ = $("<img>");
            this.timer = null;
            this.t = 700-parseInt(this.height)*2;
            this.l = 480/2-parseInt(this.width)/2;
            this.map = null
        }
        create_ui(){
            this.$.attr({"src":this.bg_img})
            this.$.css({
                "width":this.width,
                "height":this.height,
                "position":"absolute",
                "top":this.t+"px",
                "left":this.l+"px",
            })
            this.map.$.append(this.$)
        }
        move(){
            this.timer = setInterval(()=>{
                this.t += this.step*this.dir_t;
                this.l += this.step*this.dir_l;
                if(parseInt(this.map.height)-parseInt(this.height)<=this.t){
                    this.t = parseInt(this.map.height)-parseInt(this.height);
                }
                if(this.t<=0){
                    this.t = 0;
                }
                if(parseInt(this.map.width)-parseInt(this.width)<=this.l){
                    this.l = parseInt(this.map.width)-parseInt(this.width);
                }
                if(this.l<=0){
                    this.l=0;
                }
                console.log( this.t )

                this.$.css({
                    "top":this.t+"px",
                    "left":this.l+"px",
                });
            },20)
        }
        start(){
            this.create_ui();
            this.move()
        }
    }
    let map = new MAP({});
    map.start();

    let mover = new Mover({});
    mover.map = map;
    mover.start();
</script>